--- created: source_filename: /home/runner/work/mknodes/mknodes/mknodes/pages/mkclasspage/__init__.py source_function: MkClassPage.__init__ source_line_no: 46 hide: - toc icon: material/square-medium status: new template: The nodes/Image nodes/mkcard.html title: MkCard --- [:fa-brands-github: Show source on GitHub](https://github.com/phil65/mknodes/blob/main/mknodes/basenodes/mkcard/__init__.py) ### A card node, displaying an image, a button-like label and a hover caption. !!! info "Description" This node requires addtional CSS to work. === "Examples" ### Example: **With link** !!! jinja "Jinja" ``` {.jinja } {{ "Title" | MkCard("https://picsum.photos/300", target="https://phil65.github.io/mknodes/") }} ``` !!! python "Python" ``` {.python } MkCard('Title', 'https://picsum.photos/300', target='https://phil65.github.io/mknodes/') ``` ===! "Rendered"
Title

=== "Markdown" ``` {.markdown }
Title

``` === "Html" ``` {.html }

Title

``` ### Example: **With caption** !!! jinja "Jinja" ``` {.jinja } {{ "Title" | MkCard("https://picsum.photos/300", caption="Caption") }} ``` !!! python "Python" ``` {.python } MkCard('Title', 'https://picsum.photos/300', caption='Caption') ``` ===! "Rendered"
Title
Caption

=== "Markdown" ``` {.markdown }
Title
Caption

``` === "Html" ``` {.html }
Title
Caption

``` ### Example: **Separate dark mode image** !!! jinja "Jinja" ``` {.jinja } {{ "Title" | MkCard("https://picsum.photos/300", path_dark_mode="https://picsum.photos/200") }} ``` !!! python "Python" ``` {.python } MkCard('Title', 'https://picsum.photos/300', path_dark_mode='https://picsum.photos/200') ``` ===! "Rendered"
Title Title

=== "Markdown" ``` {.markdown }
Title Title

``` === "Html" ``` {.html }
Title Title

``` === "DocStrings" ::: mknodes.MkCard options: show_docstring_description: False === "Base classes" | Name | Children | Inherits | |--- | --- | --- | | **[MkTemplate](https://phil65.github.io/mknodes/)**
*mknodes.templatenodes.mktemplate*
Node representing a jinja template\. | | | === "⋔ Inheritance diagram" ``` mermaid graph TD 93860740316816["mkcard.MkCard"] 93860738888176["mktemplate.MkTemplate"] 93860744077920["mkcontainer.MkContainer"] 93860744073616["mknode.MkNode"] 93860744080896["node.Node"] 140589822947552["builtins.object"] 93860738888176 --> 93860740316816 93860744077920 --> 93860738888176 93860744073616 --> 93860744077920 93860744080896 --> 93860744073616 140589822947552 --> 93860744080896 ``` === "NodeFile" ``` {.toml title='/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkcard/metadata.toml'} [metadata] icon = "mdi:square-medium" status = "new" name = "MkCard" group = "image" [[resources.css]] filename = "grid.css" [examples.with_link] title = "With link" jinja = """ {{ "Title" | MkCard("https://picsum.photos/300", target="https://phil65.github.io/mknodes/") }} """ [examples.with_caption] title = "With caption" jinja = """ {{ "Title" | MkCard("https://picsum.photos/300", caption="Caption") }} """ [examples.dark_mode_image] title = "Separate dark mode image" jinja = """ {{ "Title" | MkCard("https://picsum.photos/300", path_dark_mode="https://picsum.photos/200") }} """ [output.markdown] template = """ {% set image = (node.image ~ "#only-light") if node.path_dark_mode else node.image %} {% if node.target %} {% endif %}
{{ node.title }} {% if node.path_dark_mode %}{{ node.title }} {% endif %} {% if node.caption %}
{{ node.caption }}
{% endif %}

{% if node.target %}
{% endif %} """ ``` === "Code" ``` {.python title='mknodes.basenodes.mkcard.MkCard' linenums='20'} class MkCard(mktemplate.MkTemplate): """A card node, displaying an image, a button-like label and a hover caption. This node requires addtional CSS to work. """ ICON = "material/square-medium" STATUS = "new" CSS = [resources.CSSFile("grid.css")] def __init__( self, title: str, image: str, *, caption: str | None = None, target: linkprovider.LinkableType | None = None, size: int = CARD_DEFAULT_SIZE, path_dark_mode: str | None = None, **kwargs: Any, ): """Constructor. Args: title: Button text image: Card image caption: Image caption target: Link target. Can be a URL, an MkPage, or an MkNav size: Height/Width of the card path_dark_mode: Optional alternative image for dark mode kwargs: keyword arguments passed to parent """ super().__init__("output/markdown/template", **kwargs) self.target = target self.title = title self.image = image self.caption = caption self.size = size self.path_dark_mode = path_dark_mode @classmethod def for_page(cls, page): image = mkbinaryimage.MkBinaryImage.for_icon(page.icon) card = MkCard( page.title, image=image.path, caption=page.subtitle or "", target=page, ) card.add_file(image.path, image.data) return card ```